<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main,
        table {
            width: 800px;
            margin: 0 auto;
        }

        .main {
            height: 40px;
            line-height: 40px;
        }

        table,
        th,
        td {
            border: 2px solid black;
            border-collapse: collapse;
        }

        .optd {
            width: 200px;
        }

        input {
            font-size: 14px;
            height: 20px;
            border-radius: 2px;
            border: 1px solid;
            margin: 2px;
        }

        .addTable {
            padding: 10px;
            position: fixed;
            top: 0px;
            left: 0px;
            bottom: 0px;
            right: 0px;
            background: rgba(21, 20, 20, 0.2);
            display: none;
        }

        .addTable table {
            text-align: center;
            margin-bottom: 10px;
            position: absolute;
            top: 50%;
            left: 50%;
            background: #fff;
            transform: translate(-50%, -50%);
        }

        .confirm {
            position: absolute;
            top: 60%;
            left: 50%;
            width: 800px;
            transform: translateX(-50%);
            text-align: center;
            height: 40px;
            line-height: 40px;
        }

        .confirm input {
            height: 40px;
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="main">
        <input type="button" value="新增一行" id="add" />
    </div>
    <table id="table">

    </table>
    <div class="addTable" id="addRow">
        <table>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
            <tr>
                <td><input type="text" id="number" /></td>
                <td><input type="text" id="name" /></td>
                <td>
                    <select id="gender">
                        <option>男</option>
                        <option>女</option>
                    </select>
                </td>
                <td><input type="text" id="age" /></td>
            </tr>
        </table>
        <div class="confirm">
            <input type="button" value="确定" id="sure" />
            <input type="button" value="取消" id="cancle" />
        </div>
    </div>
    <script>
        function $id(id) {
            return document.getElementById(id);
        }
        // 兼容
        function setInnerText(element, text) {
            if (element.innerText !== undefined) {
                element.innerText = text;
            } else {
                element.textContent = text;
            }
        }

        function getInnerText(element) {
            if (element.innerText !== undefined) {
                return element.innerText;
            } else {
                return element.textContent;
            }
        }
        var head = ["学号", "姓名", "性别", "年龄", "操作"];
        var data = [
            { "number": "001", "name": "张三", "gender": "男", "age": 16 },
            { "number": "002", "name": "王五", "gender": "女", "age": 17 },
            { "number": "003", "name": "李葫芦", "gender": "男", "age": 15 },
            { "number": "004", "name": "小明", "gender": "男", "age": 18 },
            { "number": "005", "name": "小红", "gender": "女", "age": 16 }
        ];

        var table = $id("table");
        var headtr = document.createElement("tr");
        table.appendChild(headtr);
        for (var i = 0; i < head.length; i++) {
            var th = document.createElement("th");
            setInnerText(th, head[i]);
            headtr.appendChild(th);
        }
        for (var i = 0; i < data.length; i++) {
            var tr = createRow(data[i]);
            table.appendChild(tr);
        }
        function moveUp() {
            var tr = this.parentNode.parentNode;
            var previous = tr.previousElementSibling;
            if (previous.previousElementSibling) {
                table.insertBefore(tr, previous);
            } else {
                alert("已经是第一行了");
            }
        }
        function moveDown() {
            var tr = this.parentNode.parentNode;
            var next = tr.nextElementSibling;
            if (next) {
                if (next.nextElementSibling) {
                    table.insertBefore(tr, next.nextElementSibling);
                } else {
                    table.appendChild(tr);
                }
            } else {
                alert("已经是最后一行了！！")
            }
        }
        function deleteRow() {
            var res = confirm("确定要删除？");
            if (res) {
                var tr = this.parentNode.parentNode;
                table.removeChild(tr);
            }
        }

        $id("add").onclick = function () {
            $id("addRow").style.display = "block";
        }

        $id("sure").onclick = function () {
            var number = $id("number").value;
            var name = $id("name").value;
            var opts = $id("gender").getElementsByTagName("option");
            var gender;
            for (var i = 0; i < opts.length; i++) {
                if (opts[i].selected) {
                    gender = getInnerText(opts[i]);
                    break;
                }
            }
            var age = $id("age").value;

            var obj = {
                number: number,
                name: name,
                gender: gender,
                age: age
            };
            var tr = createRow(obj);
            table.appendChild(tr);
            $id("addRow").style.display = "none";
        }
        function createRow(obj) {
            var tr = document.createElement("tr");
            table.appendChild(tr);
            for (var key in obj) {
                var td = document.createElement("td");
                setInnerText(td, obj[key]);
                tr.appendChild(td);
            }
            var optd = document.createElement("td");
            optd.className = "optd";
            var up = document.createElement("input");
            up.type = "button";
            up.value = "向上移动";
            up.onclick = moveUp;
            optd.appendChild(up);
            var down = document.createElement("input");
            down.type = "button";
            down.value = "向下移动";
            down.onclick = moveDown;
            optd.appendChild(down);
            var del = document.createElement("input");
            del.type = "button";
            del.value = "删除";
            del.onclick = deleteRow;
            optd.appendChild(del);
            tr.appendChild(optd);
            return tr;
        }
        $id("cancle").onclick = function () {
            $id("addRow").style.display = "none";
        }
    </script>
</body>
</html>